<!-- <body style="padding: 30px 3em 0 3em;"> -->
<div class="sixteen wide column" style="margin: 0 auto;">
    <div class="ui top attached tabular menu">
        <a class="item" ng-href="#/env">环境管理</a>
        <a class="active item" data-tab="tab">主机管理</a>
        <a class="item" ng-href="#/system">应用管理</a>
    </div>
    <div class="ui bottom attached tab segment active" data-tab="hosts">
        <div class="ui form segment">
            <div class="inline field">
                <input type="text" placeholder="主机IP" id="hostIp" name="hostIp" ng-model="host.hostIp">
            </div>
            <div class="inline field">
                <input type="text" placeholder="主机用户" id="hostUser" ng-model="host.hostUser">
            </div>
            <div class="inline field">
                <input type="text" placeholder="主机密码" id="hostUserPassword" ng-model="host.hostUserPassword">
            </div>
            <div class="inline field">
                <!-- <input type="text" placeholder="上层容器" id="hostParent" ng-focus="showHostParentSelect($event);"
                       ng-model="host.hostParent"> -->
                <div class="ui selection dropdown" id="hostParentSelect">
                    <input type="hidden" name="hostParent">

                    <div class="default text">上层容器（可选）</div>
                    <i class="dropdown icon"></i>

                    <div class="menu">
                        <div class="item" data-value="">无上层容器...</div>
                        <div class="item" ng-repeat="host in hosts" data-value="{{host._id}}">
                            <img class="ui mini avatar image" src="/img/computer.ico">
                            [{{host.hostEnv.name}}]&nbsp;{{host.hostIp}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="inline field">
                <div class="ui selection dropdown" id="hostEnvSelect">
                    <input type="hidden" name="hostEnv">

                    <div class="default text">环境选择...</div>
                    <i class="dropdown icon"></i>

                    <div class="menu">
                        <div class="item" ng-repeat="env in envs" data-value="{{env._id}}">{{env.name}}-{{env.code}}
                        </div>
                    </div>
                </div>
            </div>
            <div class="inline field">
                <div class="ui selection dropdown" id="hostOSSelect">
                    <input type="hidden" name="hostOS">

                    <div class="default text">系统选择...</div>
                    <i class="dropdown icon"></i>

                    <div class="menu">
                        <div class="item" data-value="Windows"><img class="ui mini avatar image" src="/img/windows.ico">Windows
                        </div>
                        <div class="item" data-value="Linux"><img class="ui mini avatar image" src="/img/linux.ico">Linux
                        </div>
                    </div>
                </div>
            </div>
            <div class="inline field">
                <div class="ui selection dropdown" id="hostTypeSelect">
                    <input type="hidden" name="hostType">
                    <div class="default text">类型选择...</div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div class="item" data-value="Physical"><img class="ui mini avatar image" src="/img/physical.png">物理机
                        </div>
                        <div class="item" data-value="Virtual"><img class="ui mini avatar image" src="/img/virtual.png">虚拟机
                        </div>
                    </div>
                </div>
            </div>
            <div class="field">
                <div class="ui teal button submit" ng-click="addHost();">
                    <i class="icon plus"></i>
                    添加
                </div>
            </div>
        </div>
        <table class="ui celled table">
            <thead>
            <tr>
                <th>主机IP</th>
                <th>类型</th>
                <th>环境</th>
                <th>系统</th>
                <th>上层容器</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="host in hosts">
                <td>{{host.hostIp}}</td>
                <td ng-if="host.hostType == 'Physical'"><img class="ui avatar image" src="/img/physical.png">物理机</td>
                <td ng-if="host.hostType == 'Virtual'"><img class="ui avatar image" src="/img/virtual.png">虚拟机</td>
                <td>{{host.hostEnv.name}}</td>
                <td ng-if="host.hostOS == 'Windows'"><img class="ui avatar image" src="/img/windows.ico">Windows</td>
                <td ng-if="host.hostOS == 'Linux'"><img class="ui avatar image" src="/img/linux.ico">Linux</td>
                <td ng-if="host.hostParent">{{host.hostParent.hostIp}}</td>
                <td ng-if="!host.hostParent"></td>
                <td>
                    <button class="ui button teal small"><i class="icon unhide"></i>查看</button>
                    <button class="ui button teal small"><i class="icon edit"></i>修改</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
